<!--
  v-if="useUserStore().roles.includes('admin')"
-->
<template>
  <div>
    <div class="app-container home">
      <el-row>
        <el-col :span="18" class="card-box">
          <el-card>
            <template #header>
              <Cpu style="width: 1em; height: 1em; vertical-align: middle;"/>
              <span style="vertical-align: middle;"> 当天登录人次</span>
            </template>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <child-component/>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" class="card-box">
          <el-card>
            <template #header>
              <Monitor style="width: 1em; height: 1em; vertical-align: middle;"/>
              <span style="vertical-align: middle;"> 最新动态</span>
            </template>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div style="height: 297px;max-height: 297px;overflow: auto">
                <el-timeline>
                  <el-timeline-item
                      v-for="(loginInfo, index) in loginInfoList"
                      :key="loginInfo.id"
                      :icon="index === 0 ? 'MoreFilled' : ''"
                      :color="loginInfo.status === '0' ? '#0bbd87' : '#ea0808'"
                      :timestamp="loginInfo.loginTime"
                  >
                    <span v-if="loginInfo.status === '0'">{{ loginInfo.userName }} {{ loginInfo.msg }}</span>
                    <span style="color: #E65D6E" v-else>{{ loginInfo.userName }} {{ loginInfo.msg }}</span>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="24" class="card-box">
          <el-card>
            <template #header>
              <UserFilled style="width: 1em; height: 1em; vertical-align: middle;"/>
              <span style="vertical-align: middle;"> 智能应用</span>
            </template>
            <el-empty v-show="aiApps.length === 0" description="description" style="max-height: 350px;overflow: auto"/>
            <el-row style="min-height: 350px">
              <el-col v-for="(aiApp, index) in aiApps" :span="7" style="margin-left: 2%;margin-right: 2%;margin-bottom: 15px;" :key="aiApp.id">
                <el-card @click="handleAiApp(aiApp)" style="cursor: pointer;position: relative">
                  <div>
                    <image-preview :src="aiApp.imgUrl" :width="50" :height="50"/>
                    <div style="position: absolute;right: 15px;top: 15px">
                      <el-tag v-show="aiApp.workflowId" type="danger" style="margin-left: 5px">流程编排</el-tag>
                      <el-tag v-show="aiApp.modelId" type="primary" style="margin-left: 5px">模型应用</el-tag>
                      <el-tag v-show="aiApp.knowledgeId" type="success" style="margin-left: 5px">知识库挂载</el-tag>
                    </div>
                    <span style="margin-left: 10px;">{{ aiApp.name }}</span>
                    <div class="ellipsis" style="color: #cccccc;font-size: 14px;margin-top: 10px">
                      应用ID {{ aiApp.id }}
                    </div>
                    <div class="ellipsis" style="color: #cccccc;">
                      <span v-if="aiApp.workflowId">选用流程 {{ aiApp.flowName }}</span>
                      <span v-else>选用模型 {{ aiApp.modelName }}</span>
                    </div>
                  </div>
                  <template #footer>
                    <div class="multiline-ellipsis" style="color: #5a5e66;font-size: 14px">{{ aiApp.prompt }}</div>
                  </template>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <el-dialog :title="title" v-model="aiAppModelOpen" fullscreen destroy-on-close @close="handleCloseAiApp">
        <div class="aiApp-container">
          <el-container>
            <el-aside width="280px" v-show="!isPreviewFlag">
              <Sidebar/>
            </el-aside>
            <el-main>
              <ChatArea/>
            </el-main>
          </el-container>
        </div>
      </el-dialog>
    </div>
  </div>

</template>

<script setup name="Index">
import {findLoginList} from '@/api/index'
import ChildComponent from '@/components/index/indexLoginCount.vue';
import {Cpu, Monitor, RefreshLeft, UserFilled} from "@element-plus/icons-vue";
import {listAllReleaseApps} from "@/api/ai/aiApps.js";
import ImagePreview from "@/components/ImagePreview/index.vue";
import {aiAppId, canSelectModelFlag, currentSelectType, initNewChat, isPreviewFlag, llmModelData, selectModel, selectWorkflow} from "@/api/ai/ai.js";
import ChatArea from "@/views/ai/chart/ChatArea.vue";
import Sidebar from "@/views/ai/chart/Sidebar.vue";

const {proxy} = getCurrentInstance();
const aiApps = ref([]);
const searchName = ref(null)
const aiAppModelOpen = ref(false)
const title = ref('')

const loginInfoList = ref([]);
proxy.components = {
  'child-component': ChildComponent
}

function initAllReleaseApps() {
  listAllReleaseApps(searchName.value).then(response => {
    aiApps.value = response.data;
  })
}

function initLoginList() {
  findLoginList().then(response => {
    loginInfoList.value = response.data;
  })
}

function handleAiApp(aiApp) {
  console.log(aiApp)
  title.value = "AI智能应用 - " + aiApp.name
  canSelectModelFlag.value = false
  isPreviewFlag.value = false
  selectWorkflow.value = null
  selectModel.value = null
  if (aiApp.workflowId) {
    currentSelectType.value = 'flowModel'
  }else {
    currentSelectType.value = 'llmModel'
  }
  selectWorkflow.value = aiApp.workflowId
  selectModel.value = aiApp.modelId
  aiAppId.value = aiApp.id
  initNewChat()
  aiAppModelOpen.value = true
}

function handleCloseAiApp() {
  aiAppModelOpen.value = false
  canSelectModelFlag.value = true
  selectModel.value = null
  selectWorkflow.value = null
  aiAppId.value = null
  currentSelectType.value = 'llmModel'
  initNewChat()
}

initLoginList();
initAllReleaseApps();
</script>

<style scoped>
.multiline-ellipsis {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制显示行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis {
  width: 100%; /* 必须设置固定宽度 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.aiApp-container {
  height: 87vh;
  display: flex;
  padding: 0 0 !important;
}

.el-container {
  height: 100%;
}

.el-aside {
  background-color: #f5f7fa;
  border-right: 1px solid #e6e6e6;
  margin-bottom: 0;
}

.el-main {
  padding: 0;
  background-color: #fff;
}
</style>


